<script setup lang="ts">
import { ref, toRef } from "vue";
import service from "~/service";

const props = defineProps({
    order: Object
})

const order = toRef(props, 'order') as any;
console.log('order:',order)
const specList = order.value.orderitems[0]?.goodsSpecList || [];
const tableData = ref(order.value.orderitems)
const totalCost = ref('')
let cost = 0
const listData = order.value.orderitems || []
listData.forEach((item: { total: any; }) => {
    cost += Number(item.total)
})
totalCost.value = cost.toFixed(2)

const loading = ref(false)
const downloadOrder = async () => {
    if (loading.value) {
        return
    }
    loading.value = true
    const res = await service.order.downloadOrder(order.value)
    loading.value = false

    const data: any = res.data
    const fileUrl = window.URL.createObjectURL(new Blob([data], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    }))
    const downloadElement = document.createElement('a')
    downloadElement.href = fileUrl
    downloadElement.download = '报价单详情.xlsx'
    document.body.appendChild(downloadElement)
    downloadElement.click()
    document.body.removeChild(downloadElement)
    window.URL.revokeObjectURL(fileUrl)
}

</script>

<template>
    <div class="order-details">
        <el-descriptions class="descriptions">
            <el-descriptions-item label="报价单号：">{{ order?.orderCode }}</el-descriptions-item>
            <el-descriptions-item label="报价单时间：">{{ order?.createDate }}</el-descriptions-item>
            <el-descriptions-item label="业务员：">{{ order?.usename }} {{ order?.mobile }}</el-descriptions-item>
        </el-descriptions>
        <el-table :data="tableData" stripe height="420" style="width: 100%" class="excel-table" cell-class-name="excel-table-cell">
            <el-table-column type="index" width="40" />
            <el-table-column prop="productName" label="名称" width="140" />
            <el-table-column v-for="(spec,index) in specList" :key="index" :label="spec.specName">
                <template #default="{ row }">{{ row.goodsSpecList[index].specValue }}</template>
            </el-table-column>
            <el-table-column prop="quantity" label="数量" width="100" />
            <el-table-column prop="price" label="单价" width="100" />
            <el-table-column prop="total" label="总价" width="120" />
        </el-table>
        <div class="total-price">
            <span class="label">费用总额</span>
            <span>{{totalCost}}</span>
            <span>元</span>
        </div>
        <div class="button">
            <el-button type="primary" @click="downloadOrder" :loading="loading">下载报价单</el-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.order-details {
    .descriptions:deep(.el-descriptions__cell) {
        font-size: 12px;
        padding-bottom: 12px;
    }
    .total-price {
        line-height: 30px;
        color: #000000;
        font-size: 12px;
        text-align: right;
        .label {
            color: #999999;
            padding-right: 18px;
        }
    }
    .button {
        text-align: right;
        padding-top: 16px;
    }
}
</style>
